cody - HTMLify profile
cody
4270 Files
632542 Views
Latest files of /cody/solygambas/html-css-javascript-projects/056-image comparison slider
style.css
cody/solygambas/html-css-javascript-projects/056-image comparison slider/style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #fef9f2;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #fef9f2;
index.html
cody/solygambas/html-css-javascript-projects/056-image comparison slider/index.html
<!-- Awesome Vanilla Javascript Image Slider! by Simo Edwin - Dev Ed (2021)
see: https://www.youtube.com/watch?v=ee8y1IV6pOI -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
see: https://www.youtube.com/watch?v=ee8y1IV6pOI -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
script.js
cody/solygambas/html-css-javascript-projects/056-image comparison slider/script.js
const container = document.querySelector(".container");
const slider = document.querySelector(".slider");
const before = document.querySelector(".img-container-before");
const after = document.querySelector(".img-container-after");
const dragSlider = (e) => {
let x = e.type.includes("mouse") ? e.layerX : e.touches[0].clientX;
let size = container.offsetWidth;
const slider = document.querySelector(".slider");
const before = document.querySelector(".img-container-before");
const after = document.querySelector(".img-container-after");
const dragSlider = (e) => {
let x = e.type.includes("mouse") ? e.layerX : e.touches[0].clientX;
let size = container.offsetWidth;